<template>
  <view>
    <!-- 新增头部导航区域 -->
    <view class="header">
      <!-- 分类标签栏 -->
      <view class="tabs">
        <view class="tab-item active">要闻</view>
        <view class="tab-item">推荐</view>
        <view class="tab-item">关注流</view>
        <view class="tab-item">24小时</view>
        <view class="tab-item">娱乐</view>
        <view class="tab-item">桂林</view>
        <view class="tab-item">财经</view>
      </view>
      
      <!-- 天气和搜索区域 -->
      <view class="weather-search">
        <view class="weather-info">
          <text class="temp">4℃ 小雨</text>
          <text class="location">桂林 PM2.59</text>
        </view>
        <view class="search-box">
          <text class="search-icon">🔍</text>
          <text class="search-placeholder">搜索关键词</text>
        </view>
      </view>
      
      <!-- 内容更新提示 -->
      <view class="update-tip">
        <text>为您更新了15条内容</text>
      </view>
    </view>

    <!-- 新闻列表区域 -->
    <view v-for="(news, index) in newsList" :key="index" style="margin: 10rpx;">
      <CustomTextView 
        :title="news.title" 
        :isTop="news.isTop" 
        :mode="news.newstype" 
        :author="news.author"
        :comments="news.comments" 
        :image="news.image" 
        :time="news.time"
        :isAd="news.isAd" 
        :imageGroup="news.imageGroup"
        :bgColor="news.isAd ? '#f5f5f5' : '#fff'">
        
        <!-- 搜索按钮：蓝框可交互样式 -->
        <template v-slot:footer v-if="news.showCX">
          <view class="search-btn" @click="handleSearch">
            <text class="search-btn__text">搜索：创新科技</text>
          </view>
        </template>
      </CustomTextView>
    </view>

  </view>
</template>

<script>
  import data from "../../data/news.json"
  import CustomTextView from "../../components/cardViewText.vue"
  export default {
    components: {
      CustomTextView
    },
    data() {
      return {
        newsList: []
      }
    },
    onLoad() {
      this.newsList = data.newsList;
    },
    methods: {
      // 导航跳转方法
      navigateTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      
      // 搜索按钮点击事件
      handleSearch() {
        uni.navigateTo({
          url: `/pages/search/search?keyword=创新科技`
        })
      }
    }
  }
</script>

<style>
page {
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 新增头部样式 */
.header {
  background-color: #fff;
  padding-bottom: 10rpx;
}

/* 分类标签栏 */
.tabs {
  display: flex;
  padding: 10rpx 0;
  overflow-x: auto;
  white-space: nowrap;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab-item {
  padding: 8rpx 20rpx;
  font-size: 28rpx;
  margin: 0 10rpx;
  border-radius: 20rpx;
}

.tab-item.active {
  background-color: #ff7a45;
  color: #fff;
}

/* 天气和搜索区域 */
.weather-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 20rpx;
}

.weather-info {
  flex: 1;
}

.temp {
  font-size: 28rpx;
  color: #333;
}

.location {
  font-size: 24rpx;
  color: #666;
  margin-left: 10rpx;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 8rpx 20rpx;
  width: 300rpx;
}

.search-icon {
  font-size: 24rpx;
  color: #999;
  margin-right: 8rpx;
}

.search-placeholder {
  font-size: 24rpx;
  color: #999;
}

/* 更新提示 */
.update-tip {
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  color: #ff7a45;
  background-color: #fff7f2;
  border-left: 4rpx solid #ff7a45;
  margin: 0 10rpx;
  border-radius: 4rpx;
}

/* 原有样式保持不变 */
.page-container {
  padding: 10rpx;
}

.nav-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 120rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  z-index: 999;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx;
}

.nav-item text {
  font-size: 24rpx;
  margin-top: 6rpx;
}

.nav-item:active {
  background-color: #f0f0f0;
  border-radius: 8rpx;
}

.search-btn {
  display: inline-block;
  border: 2rpx solid #007aff;
  border-radius: 20rpx;
  padding: 4rpx 16rpx;
  margin-top: 10rpx;
  transition: background-color 0.2s ease;
}

.search-btn__text {
  color: #007aff;
  font-size: 26rpx;
}

.search-btn:active {
  background-color: #f0f7ff;
}
</style>